<template>
	<uni-popup ref="popup" type="center" class="wraper">
	<view class='contents'>
		<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
		 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
		</canvas>
		<view class="caozuo">
			<button class="chongqian" size="mini" @tap='clearClick'>
				重签
			</button>
			<button class="over" size="mini" @tap="overSign"  :disabled="disabled">
				完成签名
			</button>
		</view>
		<view class="cancel-desc" @click="closeBox">
			点击此处取消手签
		</view>
	</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uploadFile from '@/utils/ossutil/uploadFile'
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		props:{
			signType:String
		},
		data() {
			return {
				disabled:false,
				isEnd: false // 是否签名
			}
		},
		components: {uniPopup},
		methods: {
			
			open:function(){
				this.$refs.popup.open()
			},
			closeBox:function(){
				this.$refs.popup.close()
			},
			overSign: function() {
				if (this.isEnd) {
					this.disabled = true
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							uploadFile(res.tempFilePath, 'sign/version/parent',  //图片路径可自行修改
							suc => {
								let data = {
									photo_url:suc
								}
								_that.$emit('signIn',{type:_that.signType,suc:suc})
								_that.$refs.popup.close()
								_that.clearClick()
								_that.disabled = false
								 uni.hideLoading();
							},
							error => {
								uni.showToast({
									title: "上传出错",
									icon: 'none'
								})
								 uni.hideLoading();
							})
						}
					},this)
					
				} else {
					uni.showToast({
						title: '请先完成签名',
						icon: "none",
						duration: 1500,
						mask: true
					})
				}

			},

			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log("触摸开始" + event.changedTouches[0].x)
				// console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				// console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

			},

			// 画布的触摸取消响应
			cancel: function(e) {
				console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				console.log("长按手势" + e)
			},

			error: function(e) {
				console.log("画布触摸错误" + e)
			},

			//绘制
			draw: function(touchs) {
				console.log(touchs[0],touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		mounted: function(options) {
			_that = this
			//获得Canvas的上下文
			content = wx.createCanvasContext('firstCanvas',this)
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
		},



	}
</script>

<style>
	.ts {
		color: #FF485D;
		font-size: 30rpx;
		height: 100vh;
		line-height: 100rpx;
		padding-left: 20rpx;
	}
	.wraper{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	canvas {
		background-color: #DDDDDD;
		width: 600rpx;
		margin: 0 25rpx;
		height: 1000rpx;
	}

	.contents {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	#signatureImg {
		background-color: #EEEEEE;
	}

	.caozuo {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		width: 750rpx;
	}

	.caozuo view {
		width: 200rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.caozuo view:active {
		background-color: #CCCCCC;
		color: #333333;
	}

	.chongqian {
		background-color: #FF8F58;
	}

	.over {
		background-color: #0599D7;
	}
	.cancel-desc{
		color: #fff;
	}
</style>
